<template>
  <div>
    <div style="overflow: hidden; padding: 40px 0px 60px 20px">
      <div
        v-for="(item, index) in pictures.slice(0, 7)"
        :key="index"
        class="picture-card"
        :style="{ transform: 'rotate(' + item.angle + 'deg)' }"
        @mouseenter="handleEnter(index)"
        @mouseleave="handleLevel(index)"
        @click="onPreView(index)"
      >
        <el-image
          :src="item.url"
          fit="contain"
          :style="{ width: item.width }"
        ></el-image>
      </div>
    </div>
    <div style="padding: 20px 0px 80px 2vw">
      <div
        v-for="(item, index) in pictures.slice(7, 14)"
        :key="index"
        class="picture-card picture-card2"
        :style="{ transform: 'rotate(' + item.angle + 'deg)' }"
      >
        <el-image
          :src="item.url"
          fit="contain"
          :style="{ width: item.width }"
          @mouseenter="handleEnter(7 + index)"
          @mouseleave="handleLevel(7 + index)"
          @click="onPreView(7 + index)"
        ></el-image>
      </div>
    </div>
    <div class="btn-box">
      <el-button @click="onNext"
        >NEXT<i class="el-icon-right el-icon--right"></i
      ></el-button>
    </div>
    <!-- 预览组件 -->
    <el-image-viewer
      v-if="showViewer"
      :on-close="closeViewer"
      :url-list="previewUrls"
      :initial-index="activeIndex"
    />
  </div>
</template>

<script>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
export default {
  components: {
    ElImageViewer,
  },
  data() {
    return {
      // 卡片
      initPictures: [],
      pictures: [
        {
          url: require('../../assets/1.jpg'),
          angle: 30,
          width: "13vw",
        },
        {
          url: require('../../assets/2.jpg'),
          angle: 10,
          width: "14vw",
        },
        {
          url: require('../../assets/3.jpg'),
          angle: -15,
          width: "12vw",
        },
        {
          url: require('../../assets/4.jpg'),
          angle: 5,
          width: "11vw",
        },
        {
          url: require('../../assets/5.jpg'),
          angle: 18,
          width: "10vw",
        },
        {
          url: require('../../assets/6.jpg'),
          angle: -16,
          width: "15vw",
        },
        {
          url: require('../../assets/7.jpg'),
          angle: 22,
          width: "14vw",
        },
        {
          url: require('../../assets/8.jpg'),
          angle: 16,
          width: "11vw",
        },
        {
          url: require('../../assets/9.jpg'),
          angle: -11,
          width: "12.5vw",
        },
        {
          url: require('../../assets/10.jpg'),
          angle: 30,
          width: "12vw",
        },
        {
          url: require('../../assets/11.jpg'),
          angle: 15,
          width: "13vw",
        },
        {
          url: require('../../assets/12.jpg'),
          angle: -8,
          width: "14vw",
        },
        {
          url: require('../../assets/13.jpg'),
          angle: 18,
          width: "13vw",
        },
        {
          url: require('../../assets/14.jpg'),
          angle: -4,
          width: "12vw",
        },
      ],
      showViewer: false,
      previewUrls: [],
      activeIndex: 0,
      loves: [
        "I love you",
        "愛してる",
        "사랑해",
        "Je t’aime",
        "Ich liebe dich",
        "Te quiero",
        "Ti amo",
        "Eu te amo",
        "Я люблю тебя",
        "أحبك",
        "ฉันรักคุณ",
        "Anh yêu em",
        "Σ’ αγαπώ",
        "Ik hou van jou",
        "Jag älskar dig",
        "Jeg elsker dig",
        "Jeg elsker deg",
        "Minä rakastan sinua",
        "Kocham cię",
        "Miluji tě",
        "Szeretlek",
        "Seni seviyorum",
        "אני אוהב אות",
        "मैं तुमसे प्यार करता हूँ",
        "Aku cinta kamu",
        "Saya cintakan kamu",
        "Mahal kita",
        "Te iubesc",
        "Те обичам",
        "Љубим те",
        "Volim te",
        "Ljubim te",
        "Ma armastan sind",
        "Es tevi mīlu",
        "Aš tave myliu",
        "Я тебе кохаю",
        "Я цябе кахаю",
        "მე მოთხოვნილი ვერ ვცერ",
        "Ես քայլերով սիրում էմ քեզ",
        "Sənə məhəbbət edirəm",
        "Сені сүйем",
        "Men seni yaxshi ko’raman",
        "Seni seýdim",
        "Сени колбасам",
        "Ман тӯ бадоштӣ дӯст дарозам",
        "Би чамд хайртай",
        "ချစ်တယ်",
        "ខ្ញុំស្រឡាញ់អ្នក",
        "ຂ້ອຍຮັກເຂົາ",
        "Ninakupenda",
        "Ngikuthanda",
        "Ndithathe",
        "Ke a leboga",
        "Ndithathe",
        "Ngiyakuthanda",
      ],
    };
  },
  created() {
    this.initPictures = JSON.parse(JSON.stringify(this.pictures));
    this.pictures.map((item) => {
      this.previewUrls.push(item.url);
    });
  },
  methods: {
    handleEnter(index) {
      this.pictures[index].angle = 0;
    },
    handleLevel(index) {
      this.pictures[index].angle = this.initPictures[index].angle;
    },
    onPreView(index) {
      this.activeIndex = index;
      this.showViewer = true;
    },
    closeViewer() {
      this.showViewer = false;
    },
    onNext() {
      this.$router.push({ name: 'Love' })
    }
  },
};
</script>

<style lang="scss" scoped>
.picture-card {
  border: 8px solid #fff;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  user-select: none;
  display: inline-block;
  transition: all 0.5s;
  cursor: pointer;
}
.picture-card2 {
  margin-top: -100px;
}
.btn-box {
  text-align: center;
}
</style>
